<template>
    <div ref="iframeCnt" class="com-cnt">
        <div class="box">
            <ul>
                <li>
                    <div class="list">
                        <span class=name>姓名</span>
                        <input class="content user_name" placeholder="请输入收货人姓名">
                    </div>
                </li>
                <li>
                    <div class="list">
                        <span class=name>手机号码</span>
                        <input class="content phone" placeholder="请输入收货人联系方式" />
                    </div>
                </li>
                <li>
                    <div class="list">
                        <span class=name>所在区域</span>
                        <input class="content address" id="start" type="text" value='上海 上海市 黄浦区' >
                        <i class="icon">&gt;</i>
                    </div>
                </li>
                <li>
                    <div class="list">
                        <span class=name>详细地址</span>
                        <input class="content address_jd" placeholder="请输入收货人详细地址" />
                    </div>
                </li>
                <li style="display:none;">
                    <input class="id" />
                </li>
            </ul>

            <div class="set">
                <div class="top">
                    <input type="radio" class='ipt' checked='checked'>
                    <span>设为默认收货地址</span>
                </div>
                <button class="btn" >保存</button>
            </div>
        </div>
    </div>
</template>

<script>

import http from "@/assets/js/axios"
import { domain } from '@/assets/js/config'
import Qs from 'qs'
import axios from 'axios'
import $ from 'jquery'
import { maskTips } from '@/assets/js/dom'
import { fastclick } from "@/assets/js/fastclick.js";
import { jqueryweui } from "@/assets/js/jquery-weui.js";
import { city } from "@/assets/js/city-picker.js";
import { weui } from "@/assets/css/jquery-weui.css";

export default {
    name: 'addPage',
    data() {
        return {
            sid: [],
            item:[],
            addType: ''
        }
    },
    mounted() {
        let userToken = localStorage.getItem("token") || '';
        let that = this;
        let addType = that.$route.query.addType
        that.addType = addType
        that.token = userToken;
        this.edit()
    },
    methods: {
        edit: function () {
            FastClick.attach(document.body);
                    $("#start").cityPicker({
                        title: "选择出发地",
                        onChange: function (picker, values, displayValues) { }
                    });
            var that = this;
            $('.btn').click(function () {
                var isRight = true;
                var name_zz = /^[A-Za-z0-9\u4e00-\u9fa5_]+$/;
                var phone_zz = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
                //检测用户名
                var user_namet = $('.user_name').val().trim();
                if (name_zz.test(user_namet) == false) {
                    maskTips({ id: "nameNo-fail", txt: "用户名有误，请重填" });
                    isRight = false;
                }
                //检测手机号
                var phonet = $('.phone').val().trim();
                if (phone_zz.test(phonet) == false) {
                    maskTips({ id: "phoneNo-fail", txt: "手机号码有误，请重填" });
                    isRight = false;
                }
                if (isRight) {
                    var address = $('.address').val();
                    // 分割字符串空格
                    var arr = address.split(' ');
                    let shippingaddress = {
                        'name': $('.user_name').val(),
                        'mobile': $('.phone').val(),
                        'part1': arr[0],
                        'part2': arr[1],
                        'part3': arr[2],
                        'part5': $('.address_jd').val(),
                        'defaultFlag': 1
                    }
                    
                    axios({
                        url:domain + '/xshk/f/adress/add?token=' + that.token,
                        method: 'post',
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                        data: Qs.stringify(shippingaddress)
                    }).then(res => {that.addsucc(res) }).catch(err => {that.adderr(err)})
                }
            })
                // $('.btn').show();
                // $('.btn1').hide()
        },
        addsucc: function (res) {
            var that = this
            console.log(res)
            if (res.status == 200) {
                if (res.data.data) {
                    maskTips({ id: "keep-succ", txt: "保存成功" });
                    if(that.addType == '2'){
                        that.$router.go(-1)
                    }
                    that.$router.push('/center')
                }
            }
        },
        adderr: function(err){
            console.log(err)
        }
    }
}
</script>

<style lang="stylus" scoped>
.com-cnt {
    width: 100%;
    height: 100%;
}

html, body {
    font-size: 50px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}

/* title */
.header {
    height: 0.92rem;
    text-align: center;
    background: #f2f2f2;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

.left {
    font-size: 0.28rem;
    position: absolute;
    left: 0.34rem;
    top: 0.36rem;
}

.title {
    font-size: 0.32rem;
    color: #333;
    line-height: 0.92rem;
}

.del {
    font-size: 0.24rem;
    color: #999;
    position: absolute;
    right: 0.34rem;
    top: 0.34rem;
}

/* 用户个人信息 */
.box {
    width: 100%;
    height: 100%;
    background: #f9f9f9;
    // margin-top:.92rem;
}

.box ul {
}

.box ul li {
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #e4e4e4;
}

.box ul li .list {
    padding: 0 0.4rem;
    box-sizing: border-box;
    height: 100%;
}

.box ul li .list span {
    font-size: 14px;
    line-height: 70px;
    color: #999;
}

.box ul li .list .icon {
    font-size: 18px;
    color: #cdcdcd;
    float: right;
    display: inline-block;
    line-height: 70px;
    font-weight: 600;
}

.box ul li .list .name {
    width: 1.76rem;
    height: 100%;
    display: inline-block;
    float: left;
}

.box ul li .list .content {
    border: none;
    background: #f9f9f9;
    width: 70%;
    height: 98%;
    display: inline-block;
    float: left;
    color: #999;
    font-size: 16px;
}

.content::-webkit-input-placeholder {
    color: #999;
}

.box .set {
    padding: 0 0.4rem;
    box-sizing: border-box;
}

.box .set .top {
    height: 1.04rem;
    font-size: 14px;
    color: #999;
}

.box .set .top input {
    margin-top: 0.32rem;
}

.box .set .btn {
    width: 100%;
    height: 0.8rem;
    background: #8fc122;
    border: none;
    outline: none;
    font-size: 14px;
    color: #fff;
    border-radius: 5px;
    float: left;
}

.box .set .btn1 {
    width: 100%;
    height: 0.8rem;
    background: #8fc122;
    border: none;
    outline: none;
    font-size: 14px;
    color: #fff;
    border-radius: 5px;
    float: left;
    display: none;
}
</style>